<template>
	<view class="content">
		<view class="top-title">
			<!-- <view class="text-title"><image src="../../static/hdclogo.png"></image></view> -->
			<view class="loaction" @click="setUrl">
				<image src="../../static/img/tjzw.png" mode=""></image>
				<view class="text">添加宠物</view>
			</view>
		</view>
		<view class="popup" v-if="show">
			<view class="popup-text">
				<span>快来为宠物创建专属的社交账号吧</span>
				<u-icon name="close" color="#FF9A00" style="margin-left: 30rpx;" size="28" @click="show = false"></u-icon>
			</view>
			<view class="triangle-up"></view>
		</view>
		<view class="itemList" v-if="DataList.length != 0">
			<view class="list" v-for="(item, indexs) in DataList" :key="indexs" @click="goDetails(item.id,item.pid)">
				<view class="item">
					<view class="item-nik">
						<view class="item-img"><image :src="item.avatar"></image></view>
						<view class="item-data">
							<view class="item-data-title">{{ item.name }}</view>
							<view class="item-data-icon">
								<span v-if="item.sex == 0"><u-icon name="woman" color="#FF8080" size="28"></u-icon></span>
								<span v-else><u-icon name="man" color="#0095FF" size="28"></u-icon></span>
								<span>{{ item.typeName?item.typeName:'暂无' }}</span>
								<span>{{ item.age ? item.age : 0 }}岁</span>
							</view>
							<view class="item-data-content">{{ item.sign ? item.sign : '这家伙很懒，什么都没留下' }}</view>
						</view>
						<view class="item-checked">
							<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nonempty" v-if="DataList.length == 0">
			<span>你还没有宠物</span>
			<span>快去添加吧~</span>
		</view>
	</view>
</template>
  
<script>
export default {
	data() {
		return {
			DataList: [],
			show: true
		}
	},
	onPullDownRefresh() {
		this.getData()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods:{
		goDetails(id,pid){
			uni.navigateTo({
				url: './addPet/addPet?id='+id+'&pid='+pid
			})
		},
		setUrl(){
			if(this.DataList.length >= 2){
				uni.showToast({
					title: '最多添加两个宠物哦~',
					duration:500,
					icon:'none'
				})
			}else{
				uni.navigateTo({
					url: 'addPet/addPet'
				})
			}
			
		},
		getData() {
			this.$request(this.commonApi.petList, 'GET', {}).then(res => {
				this.DataList = res.data.data;
			});
		}
	},
	mounted() {
		this.getData()
	},
	onShow () {
		let token = uni.getStorageSync('token')
		if (!token) {
			uni.navigateTo({
				url:'/myPackageA/user/login/index'
			})
			return false
		}
	}
};
</script>

<style lang="scss" scoped>
	.item-data-content {
		width: 100%;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.item-data-icon {
		width: 100%;
		padding: 20rpx 20rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		span:nth-of-type(1) {
			background: rgba(255, 128, 128, 0.08);
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
		}
		span:nth-of-type(2) {
			background: rgba(255, 154, 0, 0.08);
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			color: #ff9a00;
			font-size: 26rpx;
			margin-left: 20rpx;
		}
		span:nth-of-type(3) {
			background: rgba(131, 86, 243, 0.08);
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			color: #8356f3;
			font-size: 26rpx;
			margin-left: 20rpx;
		}
	}
	.item-data-title {
		width: 100%;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		padding: 0 20rpx;
	}
	.item-img {
		width: 88rpx;
		display: flex;
		justify-content: center;
		position: relative;
		image {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.item-data {
		width: 512rpx;
		display: flex;
		flex-direction: column;
	}
	.item-checked {
		width: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}
	.item-nik {
		width: 700rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}
	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f6f6f6;
	}
	.list {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		background: white;
	}
	.itemList {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.nonempty{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 32rpx;
		color: #999999;
		font-weight: bold;
	}
	.popup-text{
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 28rpx;
		color: #FF9A00;
		padding: 15rpx 25rpx;
		background: #FFF4E0;
		border-radius: 15rpx;
		top: 0;
		left: 20rpx;
		z-index: 2;
	}
	.popup{
		position: relative;
	}
	.triangle-up {
		position: absolute;
		top: -20rpx;
		left: 50rpx;
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 30rpx solid #FFF4E0;
		z-index: 2;
	}
	.loaction {
		padding: 5px 8px;
		display: flex;
		align-items: center;
		flex-direction: row;
		position: absolute;
		z-index: 1;
		top: 92rpx;
		left: 10px;
		border-radius: 20px;
		image{
			width: 50rpx;
			height: 46rpx;
			margin-right: 20rpx;
		}
	}
	.top-title {
		width: 100%;
		height: 180rpx;
		background: white;
		display: flex;
		align-items: center;
		background: white;
		flex-direction: row;
		position: sticky; 
		top: 0;
		z-index: 1;
		border-bottom: 1px solid #F6F6F6;
	}
.content {
	width: 100%;
	display: flex;
	height: 100vh;
	flex-direction: column;
}
</style>
